<template>
	<div>
		<h1 v-text="msg" id="title" ref="title"></h1>
		<button @click="show" ref="btn">点我输出上方的Dom元素</button>
		<RefStudent ref="stu"></RefStudent>
	</div>
</template>

<script>
	import RefStudent from './components/RefStudent.vue'
	
	export default {
		name:"App",
		data(){
			return{
				msg:"欢迎学习Vue"
			}
		},
		components:{
			RefStudent
		},
		methods:{
			show(){
				//通过id获取
				//在vue中，调用原生的DOM不太好；
				console.log("doc：",document.getElementById("title"));
				console.log("refs.title",this.$refs.title)//真实DOM元素
				console.log(this.$refs.btn)//真实DOM元素
				console.log(this.$refs.stu)//School组件的实例对象(vc)
				console.log("refs",this.$refs)
			}
		}
	}
</script>
<style>
</style>